import React, { Component } from 'react'
import './Clock.css'

export default class Clock extends Component {
    rotationInveral = ''
    state = {
        hands: [
            {name:"second-hand", degree:90}, 
            {name:"min-hand", degree:90}, 
            {name:"hour-hand", degree:90}, 
        ],
    }

    sethand(classLabel, rotate){
        console.log(this.handElement.current)
        this.handElement.current.style.transform = `rotate(${rotate}deg)`
    }

    setRotation(){
        const now = new Date()
        const second = now.getSeconds()
        const min = now.getMinutes()
        const hour = now.getHours()
        const {hands} = this.state

        let secDegree, minDegree, hourDegree
        secDegree = (second / 60) * 360 + 90
        minDegree = (min / 60) * 360 + (second / 60) * 6 + 90
        hourDegree = (hour / 12) * 360 + (min / 60) * 30 + 90


        this.setState({ 
            hands: hands.map( v =>{
                if(v.name === "second-hand") {v.degree = secDegree}
                if(v.name === "min-hand") {v.degree = minDegree}
                if(v.name === "hour-hand") {v.degree = hourDegree}
                return v
            })
        })

    }

    componentDidMount(){
        this.rotationInveral = setInterval(() => { this.setRotation() }, 1000);
    }

    componentWillUnmount(){
        clearInterval(this.rotationInveral)
    }

    render(){
        const {hands} = this.state
        return (
            <div className='center'>
                <div className="clock">
                    <div className="clock-face">
                        {
                            hands.map( (v,idx) => {
                                return (<div 
                                            key={idx} 
                                            className={`hand ${v.name}`}
                                            style={{ transform: `rotate(${v.degree}deg)` }}
                                ></div>)
                            })
                        }
                    </div>
                </div>
            </div>
        ) 
    }
}
